<template>
	<view>
		
		<view>
			<view class="container">
				<uni-card :is-shadow="false" is-full>
					
				</uni-card>
				
				<uni-list>
					<uni-list-item title="故障等级" :rightText="faultLevel" />
					<uni-list-item title="线路" :rightText="line" />
					<uni-list-item title="区间(始)" :rightText="segmentBeginning" />
					<uni-list-item title="区间(终)" :rightText="segmentEnd" />
					<uni-list-item title="当前处理人" :rightText="processBy" />
					<uni-list-item title="故障处理部门" :rightText="processByOrg" />
					<uni-list-item title="故障详情" :rightText="faultDetails" />
					<uni-list-item title="申报时间" :rightText="declareByDate" />
				</uni-list>
				
				
			</view>
		</view>
		
		<form @submit.prevent="onSubmit" @reset="formReset">
			<!-- <view>
			   <view>故障报修单id:</view>
			   <input type="text" name="formId" v-model="formData.formId" placeholder="请输入故障报修单id" />
			 </view> -->
			 
			 <view>
			   <view>故障报修单号:</view>
			   <input type="text" name="formCode" v-model="formData.formCode" placeholder="请输入故障报修单号" />
			 </view>
			 
			 <view>
			   <view>故障原因:</view>
			   <input type="text" name="faultCause" v-model="formData.faultCause" placeholder="请输入故障原因" />
			 </view>
			 
			 <view>
			   <view>故障措施:</view>
			   <input type="text" name="faultMeasures" v-model="formData.faultMeasures" placeholder="请输入故障措施" />
			 </view>
			 
			 <view>
			   <view>销令受理人:</view>
			   <input type="text" name="cancelOrderAcceptor" v-model="formData.cancelOrderAcceptor" placeholder="请输入消令受理人" />
			 </view>
			 
			 <view class="uni-title uni-common-pl" >销令时间</view>
			       <view class="uni-list">
			       	<view class="uni-list-cell">
			       		<view class="uni-list-cell-left">
			       			
			       		</view>
			       		<view class="uni-list-cell-db">
			       			<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
			       				<view class="uni-input">{{date1}}</view>
			       			</picker>
			       		</view>
			       	</view>
			       </view>
			 
			 <view style="margin: 10px; border: 1rpx solid darkgray; display: flex; align-items: center;">
			   <view style="margin: 10px;">销令照片</view>
			   <view style="flex: 1;"></view> <!-- 占位符，将按钮推到右边 -->
			   <view class="example-body" style="margin-right: 10px;display: flex; align-items: center;">
			     <uni-file-picker limit="9" file-mediatype="photo"></uni-file-picker>
			   </view>
			 </view>
			 
			 <view>
			   <view>审批人:</view>
			   <input type="text" name="approveBy" v-model="formData.approveBy" placeholder="请输入审批人" />
			 </view>
			 			 
			 <view class="uni-title uni-common-pl" >审批时间</view>
			       <view class="uni-list">
			       	<view class="uni-list-cell">
			       		<view class="uni-list-cell-left">
			       			
			       		</view>
			       		<view class="uni-list-cell-db">
			       			<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange2">
			       				<view class="uni-input">{{date2}}</view>
			       			</picker>
			       		</view>
			       	</view>
			       </view>
			 
			 <view>
			   <view>影响程度:</view>
			   <input type="text" name="affectLevel" v-model="formData.affectLevel" placeholder="请输入影响程度" />
			 </view>
			 
			 <view style="border: 1rpx solid darkgray; display: flex; align-items: center;">
			   <view style="margin: 10px;">附件</view>
			   <view style="flex: 1;"></view> <!-- 占位符，将按钮推到右边 -->
			   <view class="example-body" style="display: flex; align-items: center;">
			     <uni-file-picker limit="9" file-mediatype="photo"></uni-file-picker>
			   </view>
			 </view>
			 
			<button form-type="submit" type="primary" style="margin: 10px;">提交</button>
			 
		</form>	 
	</view>
</template>

<script>
	import axios from "axios"
	import { title } from "process";
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				faultLevel: "",
				line: "",
				segmentBeginning: "",
				segmentEnd: "",
				faultDetails: "",
				processBy: "",
				declareByDate: "",
				processByOrg: "",
				id:"",
				
				
				date1:currentDate,
				date2:currentDate,
				
				
				
				formData: {
					    // formId:'',
						formCode:'',
						faultCause:'',
						faultMeasures:'',
						cancelOrderAcceptor:'',
						approveBy:'',
				        affectLevel:'',
						cancelOrderTime:'',
						approveByTime:'',
				}
				
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			bindDateChange1: function(e) {
			            this.date1 = e.detail.value
						this.formData.cancelOrderTime=this.date1
			        },
			bindDateChange2: function(e) {
			            this.date2 = e.detail.value
						this.formData.approveByTime=this.date2
			        },
			 onSubmit(e) {
				 
			 e.preventDefault(); // 防止默认表单提交
			 console.log(this.formData); // 从'message'对象中访问表单数据
			 this.obj = this.formData; // 将表单数据分配给'obj'
			 uni.setStorageSync("message", this.obj); // 将表单数据保存在本地存储中
			 console.log("Sending data to server:", this.formData);
			  axios.post("http://localhost:82/faultRequestRepairClose/management",this.formData)
			  .then((data)=>{
				  console.log(data)
			  }).catch((err)=>{
				  console.log(err)
			  })
			  
			},
			fetchDataFromBackend() {
				
				uni.request({
					url: `http://localhost:82/faultRequestRepair/management/${this.id}`, // 替换为实际的后端API地址
					method: 'GET',
					success: (res) => {
						console.log(res.data);
						// 从后端成功获取数据后，更新前端数据
						this.faultLevel = res.data.data.faultLevel;
						this.line = res.data.data.lineText;
						this.segmentBeginning = res.data.data.segmentBeginning;
						this.segmentEnd = res.data.data.segmentEnd;
						this.faultDetails = res.data.data.faultDetails;
						this.processBy = res.data.data.processBy;
						this.declareByDate = res.data.data.declareByDate;
						this.processByOrg = res.data.data.processByOrg;
						
					},
					fail: (err) => {
					   console.error('Failed to fetch data from backend:', err);
					},
					
					
				});
			},
			 getDate(type) {
			             const date = new Date();
			             let year = date.getFullYear();
			             let month = date.getMonth() + 1;
			             let day = date.getDate();
			 
			             if (type === 'start') {
			                 year = year - 60;
			             } else if (type === 'end') {
			                 year = year + 2;
			             }
			             month = month > 9 ? month : '0' + month;
			             day = day > 9 ? day : '0' + day;
			             return `${year}-${month}-${day}`;
			         }
		},
		created() {
			this.id = this.$route.query.id
			console.log(this.id)
			this.fetchDataFromBackend(); // 在组件创建时从后端获取数据
		}
	}
</script>

<style>

</style>
